<form name="form" ng-init="vm.init();refresh();" ng-submit="vm.generate(form.$valid)" novalidate>
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">Underscore.js 模板代码</div>
      <div class="pull-right">
        <button class="btn btn-primary" type="submit" ng-disabled="form.$invalid">生成代码</button>
        <button id="copy" class="btn btn-success" type="button" data-clipboard-action="copy"
            data-clipboard-target="#code" ng-disabled="vm.code == ''">复制</button>
        <button class="btn btn-danger" type="button" ng-click="vm.reset()">重置</button>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-7">
      <fieldset>
        <legend>参数与代码模板</legend>
        <div class="x-page-scope">
          <div class="form-group">
            <label class="control-label">参数（JSON格式）：</label>
            <pretty-json json="vm.parameters" edition="true" on-edit="vm.edit(json)"></pretty-json>
          </div>
          <div class="form-group">
            <label class="control-label">代码模板（基于Underscore.js模板语法）：</label>
            <textarea class="form-control" rows="20" name="template" ng-model="vm.template" required
                ng-class="{'x-invalid': form.$submitted && form.template.$invalid}"></textarea>
            <p class="text-danger" ng-show="form.$submitted && form.template.$error.required">JS模板不能为空</p>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-md-5">
      <fieldset>
        <legend>模板代码</legend>
        <pre class="x-page-scope x-output" id="code">{{vm.code}}</pre>
      </fieldset>
    </div>
  </div>
</form>
